<script setup>
import Vrouter from "@/router"
import { ref, inject, watch } from 'vue'
import { MYURL } from '@/utils/express/express.js'
import { videogood, videodisgood, videostar, videocoin, videosubscribe, isLook, goodComment, disgoodComment } from '@/api/video/video.js'
import isToken from '@/utils/token/token.js'
import { videoupdata } from '@/utils/video_updata/video_updata.js'
import time from '@/utils/time/time.js'
import { get_user_info } from '@/api/user/user.js'
import { sendComment, getCommentWithToken, getComment, addhistory } from '@/api/video/video.js'
import get_LV from '@/api/experience/experience.js'
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
const success_message = inject('change_message_state')
const router = Vrouter
const video = ref({
    username: '',
    about: '-',
    title: '-',
    good: '点赞',
    disgood: '不喜欢',
    coin: '投币',
    star: '收藏',
    videoCount: 0,
    commentCount: 0,
    fans: 0
})
const videoid = router.currentRoute.value.query
const video_state = ref(false)
const change_message_state = inject('change_message_state')
const user_info = ref({
    coinleft: 0
})
const isEmpty = ref(false)
videoupdata(videoid.id, video.value).then((res) => {
    video.value = res
    new Player({
        id: 'video',
        url: MYURL + '/public/videos/' + video.value.fileName,
        height: '100%',
        width: '100%',
        error: '您的浏览器版本过低,请升级版本后使用',
        pip: true,
        autoplay: true,
        enableVideoDbltouch: true
    })
        addhistory(videoid.id)
    video_state.value = true
    if (isToken()) {
        isLook(videoid.id).then((res) => {
            const isLook_Satte = res.data.message
            isLook_Satte.isGood && (isAcvtive.value.good = 'active')
            isLook_Satte.isDisgood && (isAcvtive.value.disgood = 'active')
            isLook_Satte.isCoin && (isAcvtive.value.coin = 'active')
            isLook_Satte.isStar && (isAcvtive.value.star = 'active')
            isLook_Satte.isFan && (isFan.value = true)
        })
        get_user_info().then(res => {
            let result = res.data.mes[0]
            user_info.value.coinleft = result.coin
        })
    }
}).catch(() => {
    isEmpty.value = true
})

const aboutORcomment = ref(true)
const isFan = ref(false)
const showAboutState = ref(false)
const row = ref(null)
const showAbout = () => {
    if (showAboutState.value) {
        row.value.style.transform = 'rotate(0deg)'
        showAboutState.value = false
    } else {
        showAboutState.value = true
        row.value.style.transform = 'rotate(180deg)'
    }
}
const isAcvtive = ref({
    good: '',
    disgood: '',
    coin: '',
    star: ''
})
const good = () => {
    if (!isToken()) return router.push('/login');
    videogood(videoid).then((res) => {
        if (res.data.state) {
            !isNaN(video.value.good) ? video.value.good++ : video.value.good = 1
            isAcvtive.value.good = 'active'
            isAcvtive.value.disgood = ''
        } else {
            video.value.good == 1 ? video.value.good = '点赞' : video.value.good--
            isAcvtive.value.good = ''
        }
    })
}

const disgood = () => {
    if (!isToken()) return router.push('/login');
    videodisgood(videoid).then((res) => {
        if (res.data.state) {
            isAcvtive.value.disgood = 'active'
            if (isAcvtive.value.good === 'active') {
                video.value.good == 1 ? video.value.good = '点赞' : video.value.good--
            }
            isAcvtive.value.good = ''
        } else {
            isAcvtive.value.disgood = ''
        }
    })
}

const coin = (count) => {
    videoid.coinCount = count
    return videocoin(videoid).then((res) => {
        if (res.data.status === 0) {
            !isNaN(video.value.coin) ? video.value.coin += parseInt(count) : video.value.coin = parseInt(count)
            isAcvtive.value.coin = 'active'
        }
        return res
    })
}

const star = () => {
    if (!isToken()) return router.push('/login')
    videostar(videoid).then((res) => {
        if (res.data.state) {
            !isNaN(video.value.star) ? video.value.star++ : video.value.star = 1
            isAcvtive.value.star = 'active'
        } else {
            video.value.star == 1 ? video.value.star = '点赞' : video.value.star--
            isAcvtive.value.star = ''
        }
    })
}
const whichCoin = ref(true)
const coin_all = ref(null)
const change_coin = (isTrue) => {
    whichCoin.value = isTrue
    if (isTrue) {
        coin_all.value.style.transform = 'translate(-25%, 0)'
    } else {
        coin_all.value.style.transform = 'translate(25%, 0)'
    }

}
const coin_person = ref(null)
let move_person_startX
let realposition
const move_person_start = (e) => {
    move_person_startX = parseInt(e.changedTouches[0].clientY)
}
const move_person = (e) => {
    realposition = (e.changedTouches[0].clientY - move_person_startX)
    if (realposition > -50 && realposition < 0) {
        e.target.style.bottom = `${- realposition}px`
    }

}
const move_person_end = (e) => {
    if (realposition < -36) {
        e.target.style.bottom = '50px'
        setTimeout(() => {
            e.target.style.bottom = '0px'
        }, 200);
        coin(e.target.dataset.count).then((res) => {
            change_message_state(res.data.message)
            coin_show.value = false
            double_click = false
        })
        return
    }
    e.target.style.bottom = '0px'
}
let double_click = false
const click_person = (e) => {
    if (double_click) return
    double_click = true
    e.target.style.bottom = '50px'
    setTimeout(() => {
        e.target.style.bottom = '0px'
        coin(e.target.dataset.count).then((res) => {
            change_message_state(res.data.message)
            coin_show.value = false
            double_click = false
        })
    }, 200)
}
const coin_show = ref(false)
const subscribe = () => {
    if (!isToken()) return router.push('/login')
    videosubscribe(videoid).then((res) => {
        if (res.data.status != 1) {
            isFan.value = !isFan.value
            if (isFan.value) {
                video.value.fans--
            } else {
                video.value.fans++
            }
        }
        change_message_state(res.data.message)
    })
}
const commentEpty = ref(true)
const show_about = ref(false)
const now_count = ref(70)
const comment_text = ref('')
const my_about = () => {
    now_count.value < 0 ? now_count.value = 0 : now_count.value = 70 - comment_text.value.length
}
const change_about_state = (who, which) => {
    messageIndex.value = null
    send_who.value = who
    send_message.value = which
    my_about()
}
let reg = /[\t\r\f\n\s]*/g;
const Son = ref(false)
const send = (where) => {
    if (!isToken()) return router.push('login')
    if (comment_text.value.replace(reg, '') == '') return success_message('请输入评论')
    const data = { call_who: send_who.value, commentId: send_message.value, videoId: videoid.id, comment: comment_text.value, father: where && !send_message.value ? true : null }
    sendComment(data).then(res => {
        if (res.data.status === 0) {
            comment_text.value = ''
            if (where) {
                if (send_message.value) {
                    messageList.value[messageIndex.value].sonComment ? messageList.value[messageIndex.value].sonComment.unshift(res.data.data) : messageList.value[messageIndex.value].sonComment = [res.data.data]
                } else {
                    messageList.value.unshift(res.data.data)
                }
            } else {
                if (!Son.value) {
                    if (!messageIndex.value) messageIndex.value = 0
                    mainDetail.value[messageIndex.value].sonComment ? mainDetail.value[messageIndex.value].sonComment.push(res.data.data) : mainDetail.value[messageIndex.value].sonComment = [res.data.data]
                } else {
                    commentDetail_List.value.push(res.data.data)
                }
            }
        }
        video.value.commentCount++
        success_message(res.data.message)
    })
}
watch(comment_text, (e) => {
    commentEpty.value = e.replace(reg, '') == ''
})
const isCommentDetail = ref(false)
let IsFrisrt = true
const messageList = ref([])
const loadMessage = () => {
    aboutORcomment.value = false
    if (!IsFrisrt) return
    function load() {
        if (isToken()) {
            return getCommentWithToken(videoid.id)
        } else {
            return getComment(videoid.id)
        }
    }
    load().then((res) => {
        IsFrisrt = false
        messageList.value = res.data.message
    }).catch(() => {
        IsFrisrt = true
    })
}
const commentDetail_List = ref([])
const mainDetail = ref([])
const messageIndex = ref(null)
const showComment = (index, comment_id, who) => {
    send_who.value = who
    send_message.value = comment_id
    isCommentDetail.value = true
    mainDetail.value = [messageList.value[index]]
    commentDetail_List.value = messageList.value[index].sonComment
}
const send_who = ref(null)
const send_message = ref(null)
const comment_input = ref(null)
const comment_inputs = ref(null)
const replayOther = (commentId, call_who, index, isSon) => {
    Son.value = isSon
    messageIndex.value = index
    // show_about.value = true
    comment_input.value.focus()
    comment_inputs.value.focus()
    my_about()
    send_who.value = call_who
    send_message.value = commentId
}
const toGoodComment = (List, id) => {
    if (!isToken()) return router.push('login')
    goodComment(id).then((res) => {
        if(res.data.status === 0) {
            List.isGood = !List.isGood
            List.isGood ? List.good++ : List.good--
            if(List.isDisgood &&  List.isGood) {
                List.isDisgood = false
            }
        }
    })
}
const toDisgoodComment = (List, id) => {
    if (!isToken()) return router.push('login')
    disgoodComment(id).then((res) => {
        if(res.data.status === 0) {
            List.isDisgood = !List.isDisgood
            if( List.isDisgood &&  List.isGood) {
                List.isGood = false
                List.good--
            }
        }
    })
}
</script>
<template>
    <div v-if="isEmpty">
        <IsEmpty>视频丢失啦</IsEmpty>
    </div>
    <div v-if="!isEmpty">
        <div class="video_position">
            <div class="video-detail">
                <!-- <video controls width="100%" height="100%" v-if="video_state"
                    :src="MYURL + '/publico autop/videos/' + video.fileName"></video> -->
                <div class="video" id="video"></div>
            </div>
            <div class="change_nav" v-show="!isCommentDetail">
                <p @click="aboutORcomment = true" :class="{ avtive: aboutORcomment }">简介</p>
                <div :class="{ avtive: !aboutORcomment }" @click="loadMessage" class="comment">
                    <p>评论</p>
                    <p>{{ video.commentCount }}</p>
                </div>
            </div>
        </div>
        <div v-show="!isCommentDetail">
            <div class="video-say" v-show="aboutORcomment">
                <div class="up-info" @click="router.push(`/personal?up=${video.up}`)">
                    <img class="profile" v-if="video_state" :src="MYURL + '/public/profiles/' + video.profile">
                    <div class="up-id">
                        <p>{{ video.username }}</p>
                        <div class="up-name">
                            {{ video.fans === 0 ? '-' : video.fans }}粉丝 {{ video.videoCount }}视频
                        </div>
                    </div>
                    <p @click.stop="subscribe" v-show="!isFan"><b style="font-size: 15px;">+</b> 关注</p>
                    <div @click.stop="subscribe" class="fan" v-show="isFan">
                        <img src="@/assets/img/table.png">
                        <p>已关注</p>
                    </div>
                </div>
                <div @click="showAbout">
                    <div class="video-about">
                        <div class="video-title">
                            <p :class="{ textLeave: !showAboutState }">{{ video.title }}</p>
                            <img ref="row" src="@/assets/img/downrow.png">
                        </div>
                        <div class="playbacks">
                            <div class="playbacks-main">
                                <img src="@/assets/img/playbacks.png">
                                <p>3.2万</p>
                            </div>
                            <p>{{ time(parseInt(video.time))[0] }} <span>{{ time(parseInt(video.time))[1] }}</span></p>
                        </div>
                    </div>
                    <div v-show="showAboutState" class="video-about-main">
                        <p>{{ video.about }}</p>
                    </div>
                </div>
                <div class="good-nav">
                    <div @click="good">
                        <img :src="MYURL + '/public/icon/good' + isAcvtive.good + '.png'">
                        <p>{{ video.good }}</p>
                    </div>
                    <div @click="disgood">
                        <img :src="MYURL + '/public/icon/disgood' + isAcvtive.disgood + '.png'">
                        <p>不喜欢</p>
                    </div>
                    <div @click=" isToken() ? coin_show = true : router.push('/login')">
                        <img :src="MYURL + '/public/icon/coin' + isAcvtive.coin + '.png'">
                        <p>{{ video.coin }}</p>
                    </div>
                    <div @click="star">
                        <img :src="MYURL + '/public/icon/star' + isAcvtive.star + '.png'">
                        <p>{{ video.star }}</p>
                    </div>
                </div>
            </div>

            <div class="comment" v-show="!aboutORcomment">
                <div class="comment_select">
                    <p>热门评论</p>
                    <div>
                        <img src="@/assets/img/table.png" alt="">
                        <p>按热度</p>
                    </div>
                </div>
                <div class="comment_main">
                    <div v-show="messageList.length === 0">
                        <IsEmpty>快发布一条评论活跃一下气氛吧</IsEmpty>
                    </div>
                    <div class="comment_single" v-for="message, index in messageList" :key="message.id"
                        @click="replayOther(message.id, message.user_id, index, false)">
                        <div class="comment_top">
                            <img @click.stop="router.push(`/personal?up=${message.account}`)"
                                :src="`${MYURL}/public/profiles/${message.profile}`" alt="">
                            <div class="user_info">
                                <div>
                                    <p @click.stop="router.push(`/personal?up=${message.account}`)" class="comment_name">{{
                                        message.username }}</p>
                                    <img @click.stop="router.push(`/personal?up=${message.account}`)"
                                        :src="`${MYURL}/public/icon/lv${get_LV(message.experience).LV}.png`" alt="">
                                </div>
                                <p class="time">{{ time(parseInt(message.time))[2] }}</p>
                                <div class="comment_center">
                                    <p>
                                        {{ message.comment }}
                                    </p>
                                </div>
                                <div class="more_active">
                                    <div @click.stop="toGoodComment(message, message.id)">
                                        <img :class="{ isOpcity: message.isGood }"
                                            :src="`${MYURL}/public/icon/activegood${message.isGood ? 'active' : ''}.png`"
                                            alt="">
                                        <p>{{ message.good === 0 ? '' : message.good }}</p>
                                    </div>
                                    <div @click.stop="toDisgoodComment(message, message.id)">
                                        <img :src="`${MYURL}/public/icon/activedisgood${message.isDisgood ? 'active' : ''}.png`" alt="">
                                    </div>
                                    <div>
                                        <img src="@/assets/img/comment.png" alt="">
                                    </div>
                                </div>
                                <div v-show="message.sonComment" class="more_comment"
                                    @click.stop="showComment(index, message.id, message.user_id)">
                                    <p>共{{ message.sonComment ? message.sonComment.length : '' }}条回复</p>
                                    <img src="@/assets/img/downrow.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 60px;"></div>
                <div class="send_comment">
                    <div class="send_btn">
                        <div @click="change_about_state(null, null)" class="btn_input">
                            <!-- <p :class="{ black: !commentEpty }"> {{ commentEpty ? '这里是评论区,不是无人区~' : comment_text }} </p> -->
                            <input type="text" ref="comment_inputs" class="comment_input" placeholder="这里是评论区,不是无人区~"
                                v-model="comment_text">
                        </div>
                        <p @click="send(true)">发送</p>
                    </div>
                    <div class="show_about" v-show="show_about">
                        <div>
                            <textarea @input="my_about" v-model="comment_text" name="" maxlength="70" id="" cols="30"
                                rows="10"></textarea>
                            <p class="text_count">{{ now_count }}</p>
                            <p class="sure_btn" @click="show_about = false">确定</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="isCommentDetail" class="isCommentDetail">
            <div class="isCommentDetail_title">
                <p>评论详情</p>
                <img @click="isCommentDetail = false" src="@/assets/img/close.png" alt="">
            </div>

            <div class="comment_single" v-for="comment, index in mainDetail" :key="comment.id"
                @click="replayOther(comment.id, comment.user_id, index, false)">
                <div class="comment_top">
                    <img @click.stop="router.push(`/personal?up=${comment.account}`)"
                        :src="`${MYURL}/public/profiles/${comment.profile}`" alt="">
                    <div class="user_info">
                        <div>
                            <p @click.stop="router.push(`/personal?up=${comment.account}`)" class="comment_name">{{
                                comment.username }}</p>
                            <img @click.stop="router.push(`/personal?up=${comment.account}`)"
                                :src="`${MYURL}/public/icon/lv${get_LV(comment.experience).LV}.png`" alt="">
                        </div>
                        <p class="time">{{ time(parseInt(comment.time))[2] }}</p>
                        <div class="comment_center">
                            <p>
                                {{ comment.comment }}
                            </p>
                        </div>
                        <div class="more_active">
                            <div @click.stop="toGoodComment(comment, comment.id)">
                                <img :class="{ isOpcity: comment.isGood }"
                                    :src="`${MYURL}/public/icon/activegood${comment.isGood ? 'active' : ''}.png`" alt="">
                                <p>{{ comment.good === 0 ? '' : comment.good }}</p>
                            </div>
                            <div @click.stop="toDisgoodComment(comment, comment.id)">
                                <img :src="`${MYURL}/public/icon/activedisgood${comment.isDisgood ? 'active' : ''}.png`" alt="">
                            </div>
                            <div>
                                <img src="@/assets/img/comment.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="comment_color"></div>

            <div class="comment_select">
                <p>相关回复共 {{ commentDetail_List.length }} 条</p>
                <div>
                    <img src="@/assets/img/table.png" alt="">
                    <p>按热度</p>
                </div>
            </div>

            <div class="comment_single" v-for="comment in commentDetail_List" :key="comment.id"
                @click="replayOther(send_message, comment.user_id, index, true)">
                <div class="comment_top">
                    <img @click.stop="router.push(`/personal?up=${comment.account}`)"
                        :src="`${MYURL}/public/profiles/${comment.profile}`" alt="">
                    <div class="user_info">
                        <div>
                            <p @click.stop="router.push(`/personal?up=${comment.account}`)" class="comment_name">{{
                                comment.username }}</p>
                            <img @click.stop="router.push(`/personal?up=${comment.account}`)"
                                :src="`${MYURL}/public/icon/lv${get_LV(comment.experience).LV}.png`" alt="">
                        </div>
                        <p class="time">{{ time(parseInt(comment.time))[2] }}</p>
                        <div class="comment_center">
                            <p>
                                <span v-show="comment.call_who != mainDetail[0].user_id">回复</span><span
                                    style="color: #2b6798;" v-show="comment.call_who != mainDetail[0].user_id">@{{
                                        comment.call_name }} </span> <span> {{ comment.comment }}</span>
                            </p>
                        </div>
                        <div class="more_active">
                            <div  @click.stop="toGoodComment(comment, comment.id)">
                                <img :class="{ isOpcity: comment.isGood }"
                                    :src="`${MYURL}/public/icon/activegood${comment.isGood ? 'active' : ''}.png`" alt="">
                                <p>{{ comment.good === 0 ? '' : comment.good }}</p>
                            </div>
                            <div  @click.stop="toDisgoodComment(comment,comment.id)">
                                <img :src="`${MYURL}/public/icon/activedisgood${comment.isDisgood ? 'active' : ''}.png`" alt="">
                            </div>
                            <div>
                                <img src="@/assets/img/comment.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="height: 60px;"></div>
            <div class="send_comment">
                <div class="send_btn">
                    <div @click="change_about_state(send_who, send_message)" class="btn_input">
                        <!-- <p :class="{ black: !commentEpty }"> {{ commentEpty ? '这里是评论区,不是无人区~' : comment_text }}  </p> -->
                        <input ref="comment_input" type="text" class="comment_input" placeholder="这里是评论区,不是无人区~"
                            v-model="comment_text">
                    </div>
                    <p @click="send(false)">发送</p>
                </div>
                <div class="show_about" v-show="show_about">
                    <div>
                        <textarea @input="my_about" v-model="comment_text" name="" maxlength="70" id="" cols="30"
                            rows="10"></textarea>
                        <p class="text_count">{{ now_count }}</p>
                        <p class="sure_btn" @click="show_about = false">确定</p>
                    </div>
                </div>
            </div>

        </div>

        <div v-show="coin_show" class="coin_mask" @touchmove.prevent>
            <div class="coin_main">
                <div class="coin_select">
                    <img @click="change_coin(false)" :class="{ coin_active: whichCoin }" class="last_icon first_coin"
                        src="@/assets/img/last.png">
                    <div class="coin_all" ref="coin_all">
                        <img :class="{ coin_another: whichCoin }" class=" coin_img coin_go" src="@/assets/img/coin.png"
                            alt="">
                        <img :class="{ coin_another: !whichCoin }" class="coin_img coin_margin"
                            src="@/assets/img/twocoin.png">
                    </div>
                    <img @click="change_coin(true)" :class="{ coin_active: !whichCoin }" class="last_icon last_coin "
                        src="@/assets/img/last.png">
                </div>
                <div class="coin_person">
                    <div ref="coin_person" @click="click_person" @touchstart="move_person_start"
                        @touchmove.prevent="move_person" @touchend="move_person_end">
                        <img v-show="whichCoin" data-count=2 src="@/assets/img/twocoinimg.png" alt="">
                        <img v-show="!whichCoin" data-count=1 src="@/assets/img/coinimg.png" alt="">
                    </div>
                    <p class="coin_text">上滑或点击22娘投硬币</p>
                    <p class="coin_left">硬币余额: {{ user_info.coinleft }}</p>
                </div>
                <div class="close">
                    <img @click="coin_show = false" src="@/assets/img/closecoin.png">
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.comment_input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 40px;
    padding: 0 0 0 20px;
    background-color: rgba(0, 0, 0, .01);
    outline: none;
}

.isOpcity {
    opacity: 1 !important;
}

.black {
    color: black !important;
}

.textLeave {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video_position {
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.avtive {
    color: var(--bilibili-pink);
}

.video-detail {
    height: 30vh;
    background-color: black;
}

.change_nav {
    padding: 10px 0 10px 30px;
    display: flex;
    gap: 10%;
    background-color: white;
    font-size: 15px;
    border-bottom: 1px rgba(0, 0, 0, 0.12) solid;

    color: #62666c !important;

    .comment {
        display: flex;
        align-items: center;

        p:last-child {
            font-size: 12px;
        }
    }
}

.up-info {
    margin-top: 10px;
    padding: 0 15px;
    display: flex;
    gap: 10px;
    align-items: center;

    .profile {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
    }

    .up-id {
        width: 50%;
        display: flex;
        flex-direction: column;

        p {
            width: 100%;
            color: #4e5258;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        div {
            font-size: 11px;
            color: #979ba1
        }
    }

    >p {
        margin-left: auto;
        background-color: var(--bilibili-pink);
        font-size: 13px;
        color: white;
        padding: 3px 20px;
        border-radius: 20px;
    }

    .fan {
        background-color: #e3e5e7;
        color: #95999f;
        margin-left: auto;
        display: flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 20px;
        gap: 3px;

        p {
            font-size: 13px;
            font-weight: 500;
        }

        img {
            width: 15px;
        }
    }
}

.video-about {
    margin-top: 20px;
    padding: 0 15px;

    .video-title {
        display: flex;
        align-items: flex-start;

        p {
            font-size: 15px;
            width: 95%;
        }

        img {
            margin-left: auto;
            width: 15px;
            // transform: rotate(180deg);
        }
    }

    .playbacks {
        margin-top: 5px;
        display: flex;
        gap: 10px;
        align-items: center;

        .playbacks-main {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        img {
            width: 15px;
        }

        p {
            color: #95999f;
            font-size: 12px;
        }
    }

}

.video-about-main {
    margin-top: 5px;
    padding: 0 15px;
    font-size: 12px;
    color: #95999f;
}

.router-link-active {
    color: var(--bilibili-pink);
}

.good-nav {
    margin-top: 15px;
    padding: 0 15px 20px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #e6e8ea;

    >div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;

        p {
            font-size: 11px;
            color: #989ca2;
        }

        img {
            width: 20px;
            pointer-events: none;
        }
    }
}

.coin_mask {
    background-color: rgba(0, 0, 0, 0.62);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;

    .coin_main {
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .coin_select {
        position: relative;
        width: 100vw;
        display: flex;
        align-items: center;


        .last_coin {
            transform: rotate(180deg);
        }

        .coin_active {
            -webkit-filter: brightness(200%);
            filter: brightness(200%);
        }

        .coin_all {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translate(-25%, 0);
            transition: all .5s;
            gap: 10%;
        }

        .last_icon {
            width: 32px;
        }

        .coin_img {
            width: 85px;
            transition: all .5s;
        }

        .coin_another {
            width: 70px;
            // transition: all .5s;
        }
    }

    .coin_person {
        display: flex;
        flex-direction: column;
        align-items: center;

        >div {
            height: 210px;
            position: relative;
        }

        img {
            transition: all .1s;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 0);
            width: 120px;
            -webkit-filter: drop-shadow(1px 1px 2px black) drop-shadow(-1px -1px 2px black);
            filter: drop-shadow(1px 1px 2px black) drop-shadow(-1px -1px 2px black);
        }

        .coin_text {
            margin-top: 10px;
            color: #c1c1c1;
            opacity: .9;
            font-size: 12px;
        }

        .coin_left {
            color: white;
            font-size: 13px;
            opacity: .9;
        }
    }

    .close {
        margin-top: 40px;
        padding-bottom: 30px;
        display: flex;
        justify-content: center;

        img {
            opacity: .9;
            width: 30px;
        }
    }
}

.send_btn {
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, .09);
    position: fixed;
    padding: 10px 10px;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;


    .btn_input {
        width: 75%;
        height: 30px;
        background-color: #f6f7f8;
        border-radius: 12px;
        display: flex;
        align-items: center;

        p {
            color: #cacdd0;
            margin-left: 20px;
            font-size: 14px;
            overflow: hidden;
            padding-right: 10px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    }

    >p {
        background-color: var(--bilibili-pink);
        color: white;
        border-radius: 15px;
        font-size: 13px;
        padding: 5px 15px;
    }
}

.show_about {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.70);

    div {
        // border-radius: 100px;
        position: absolute;
        width: 100vw;
        height: 50vh;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        background-color: white;
        border-radius: 10px;

        textarea {
            border-radius: 10px;
            padding: 5px;
            font-size: 16px;
            width: 100%;
            height: 70%;
            border: none;
            outline: none;
            resize: none;
        }

        .text_count {
            position: absolute;
            color: #9a9a9a;
            right: 2%;
            bottom: 2%;
        }

        .sure_btn {
            background-color: var(--bilibili-pink);
            position: absolute;
            color: white;
            padding: 5px;
            border-radius: 10px;
            left: 2%;
            bottom: 2%;
        }
    }
}

.comment_select {
    padding: 0 10px;
    margin-top: 5px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;

    // >p {
    //     font-size: 14px;
    // }

    >div {
        display: flex;
        align-items: center;
        color: #95999f;
        gap: 3px;

        img {
            width: 15px;
        }
    }
}

.comment_single {
    margin-top: 10px;
    padding: 0 10px;

    .comment_top {
        display: flex;
        gap: 12px;
        // align-items: center;

        >img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        .user_info {
            width: 100%;

            >div {
                display: flex;
                gap: 5px;
                align-items: center;

                >p {
                    color: #62666c;
                    font-size: 13px;
                    // line-height: 14px;
                }

                img {
                    width: 20px;
                }
            }

            .time {
                font-size: 11px;
                color: #95999f;
            }

            .comment_center {
                margin-top: 10px;
                font-size: 14px;

                p {
                    color: black;
                }
            }

            .more_active {
                margin-top: 10px;
                display: flex;
                gap: 20px;

                >div {
                    display: flex;
                    gap: 3px;
                    align-items: center;

                    p {
                        color: #9fa3a9;
                        font-size: 12px;
                        line-height: 12px;
                    }

                    img {
                        width: 16px;
                    }
                }
            }

            .more_comment {
                width: 100%;
                margin-top: 10px;
                border-radius: 5px;
                background-color: #f6f7f8;
                padding: 10px 0;
                display: flex;

                :first-child {
                    margin-left: 10px;
                    font-size: 12px;
                    color: #4b89bc;
                    font-weight: 600;
                }

                :last-child {
                    width: 10px;
                    transform: rotate(-90deg);
                }
            }
        }
    }
}


.isCommentDetail {
    width: 100%;
    position: absolute;

    .isCommentDetail_title {
        background-color: white;
        position: sticky;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .09);
        // border-top: 1px solid rgba(0, 0, 0, .09);
        padding: 10px 10px;
        display: flex;
        justify-content: space-between;

        :first-child {
            font-size: 14px;
        }

        :last-child {
            font-size: 20px;
            width: 20px;
            // opacity: .5;
        }
    }

    .more_active {
        padding-bottom: 10px;
    }

    .comment_color {
        background-color: #f2f3f5;
        // opacity: .2;
        height: 10px;
    }

    .comment_select {
        >:first-child {
            color: #95999f;
        }
    }
}

@media screen and (min-width: 768px) {
    video {
        width: 100%;
        height: 50vh;
    }
}

@media screen and (min-width: 992px) {
    video {
        width: 100%;
        height: 80vh;
    }
}
</style>